<template>
  <div class="about">
    <p>{{count}}--{{doubleCount}}</p>
    <p>{{firstName}}--{{lastName}}</p>
    <button @click="changeName = 'xiao qi'">修改名称</button>
    <p></p>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
export default defineComponent({
    name:"AboutView",
})
</script>

<script lang="ts" setup>
import {computed, ref} from "vue";

const count = ref(2)
const doubleCount = computed(()=>{
    return count.value * 2
})


const firstName = ref("lao")
const lastName = ref("liu")
const changeName = computed({
    get(){
        return firstName.value + " " + lastName.value
    },
    set(val:string){
        [firstName.value,lastName.value] = val.split(" ")
        console.log(val)
    }
})
</script>

<style lang="scss" scoped>
.about{
  height: 600px;
  width: 100%;
  border: 1px solid #2c3e50;
}
</style>